<div class="page">
    <div class="main">
        <div class="step">
            <div class="done">
                <img src="../../../../../assets/images/run.png"><span>模板配置</span>
            </div>
            <div class="todo">
                <img src="../../../../../assets/images/todo.png"><span>数据集配置</span>
            </div>
            <div class="todo">
                <img src="../../../../../assets/images/todo.png"><span>模型配置</span>
            </div>
            <div class="todo">
                <img src="../../../../../assets/images/todo.png"><span>模型训练</span>
            </div>
            <div class="todo">
                <img src="../../../../../assets/images/todo.png"><span>模型评估</span>
            </div>
            <div class="todo">
                <img src="../../../../../assets/images/todo.png"><span>应用评估</span>
            </div>
            <div class="todo">
                <img src="../../../../../assets/images/todo.png"><span>模型部署</span>
            </div>
        </div>
        <div class="top_line"><img src="../../../../../assets/images/arrow.jpg" class="top_arrow"></div>
        <div class="context">
            <div class="title">模板配置</div>
            <div class="mainInfo">                
                <div class="left">
                    <div class="leftTitle">上传模板图片<span>更换图片</span></div>
                    <div class="leftCtx" *ngIf="isNone">
                        <img src="../../../../../assets/images/upload.png">
                        <span style="color: #526ecc;" (click)="uploadImg()">点击上传图片</span>
                        <span>请上传一张具有代表性的数据集图片进行配置提取字段。图片大小不得超过500KB，请确保上传的模板图片字迹清晰，摆放端正</span>
                    </div>
                    <div class="leftCtx1" *ngIf="!isNone">
                        <img src="../../../../../assets/images/bgd.jpeg">                        
                    </div>
                </div>
                <div class="right">
                    <img src="../../../../../assets/images/arrow.jpg" class="arrow">
                    <div class="rightTitle">Key值提取&nbsp;&nbsp;<img (click)="addKey()" src="../../../../../assets/images/icon_add.png"/></div>
                    <div class="rightCtx" *ngIf="isNone">
                        <img src="../../../../../assets/images/epy.png">
                        <span>暂无任何信息，请先上传图片</span>
                    </div>
                    <div class="rightCtx1" *ngIf="!isNone">
                        <div class="rightinput" *ngFor="let item of keyList;let key=index;">
                            <input type="checkbox">
                            <nz-input-group [nzAddOnBefore]="prefixTemplate" class="ginput" (mouseover)="showIcon(item.id)">
                                <input type="text" [attr.id]="item.id" nz-input value="{{ item.val }}" [readOnly]="showEditIndex != item.id" [disabled]="showEditIndex != item.id" 
                                    (change)="changeKey(item.id,$event)"  (blur)="disableTxt(item.id)"/>
                            </nz-input-group>
                            <ng-template #prefixTemplate ><img src="../../../../../assets/images/sel.png"></ng-template>
                            <i *ngIf="showIconIndex == item.id" nz-icon nzType="edit" nzTheme="outline" class="edit" (click)="edit(item.id)"></i>
                            <img *ngIf="showIconIndex == item.id" src="../../../../../assets/images/del.png" (click)="deleteKey(item)"/>
                        </div>
                        <div class="infoTips" *ngIf="isTips" >
                            <div><img src="../../../../../assets/images/info.png"></div>
                            <div>自动提取已完成，请检查提取出的key值是否正确，您可以按需要修改、添加和删除。</div>
                            <div><i nz-icon nzType="close" nzTheme="outline" (click)="closeTips()"></i></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="bottom">
        <button nz-button nzType="defalut" (click)="nextStep()">下一步</button>
    </div>
</div>
